<template>
  <div class="top">
    <a-form layout="inline" :model="searchForm">
      <a-form-item label="时间检索">
        <a-radio-group v-model:value="searchForm.timeType">
          <a-radio value="1">年份</a-radio>
          <a-radio value="2">日期范围</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="searchForm.timeType === '1'" label="年份">
        <a-input placeholder="请输入年份" v-model:value="searchForm.year" />
      </a-form-item>
      <a-form-item v-if="searchForm.timeType === '2'" label="日期范围">
        <a-range-picker
          v-model:value="searchForm.dateRange"
          format="YYYY-MM-DD"
          @change="handleDateChange"
        />
      </a-form-item>
      <a-form-item label="类型">
        <a-select v-model:value="searchForm.processType" style="width: 100px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="扬沙">扬沙</a-select-option>
          <a-select-option value="沙尘暴">沙尘暴</a-select-option>
          <a-select-option value="强沙尘暴">强沙尘暴</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="排序类型">
        <a-select v-model:value="searchForm.sortType" style="width: 100px">
          <a-select-option value="time">时间</a-select-option>
          <a-select-option value="dustArea">扬沙面积</a-select-option>
          <a-select-option value="dustStormArea">沙尘暴面积</a-select-option>
          <a-select-option value="strongDustStormArea">强沙尘暴面积</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="排序方法">
        <a-select v-model:value="searchForm.sortMethod" style="width: 100px">
          <a-select-option value="1">正序</a-select-option>
          <a-select-option value="2">倒序</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="">
        <a-button type="primary" @click="handleSearch">检索</a-button>
        <a-button type="primary" @click="handleExport">导出</a-button>
      </a-form-item>
    </a-form>
  </div>
  <div class="container">
    <div class="left">
      <a-table
        rowKey="id"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        style="height: 650px"
        :scroll="{ x: 400, y: 600 }"
        :custom-row="handleClickRow"
      />
    </div>
    <div class="center" style="text-align: center">
      <custom-tabs :tabs="tabs" :vertical="true" @tab-change="handleTabChange">
        <template #0>
          <div><img :src="form.img" class="imge" /></div>
        </template>
        <template #1>
          <div><img :src="form.img" class="imge" /></div>
        </template>
        <template #2>
          <div><img :src="form.img" class="imge" /></div>
        </template>
      </custom-tabs>
    </div>
    <div class="right">
      <div class="xiangqing"> 详情 </div>
      <a-form :model="form">
        <a-form-item label="编号" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.wid" />
        </a-form-item>
        <a-form-item label="过程类型" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.processType" />
        </a-form-item>
        <a-form-item label="影响系统" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.impact" />
        </a-form-item>
        <a-form-item label="影响范围" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-textarea v-model:value="form.describeT" />
        </a-form-item>
        <a-form-item label="值班人员" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.duty" />
        </a-form-item>
        <a-form-item
          label="扬沙面积(万平方公里)"
          :labelCol="{ span: 10 }"
          :wrapperCol="{ span: 14 }"
        >
          <a-input v-model:value="form.dustArea" />
        </a-form-item>
        <a-form-item
          label="沙尘暴面积(万平方公里)"
          :labelCol="{ span: 10 }"
          :wrapperCol="{ span: 14 }"
        >
          <a-input v-model:value="form.dustStormArea" />
        </a-form-item>
        <a-form-item
          label="强沙尘暴面积(万平方公里)"
          :labelCol="{ span: 10 }"
          :wrapperCol="{ span: 14 }"
        >
          <a-input v-model:value="form.strongDustStormArea" />
        </a-form-item>
        <a-form-item label="最大风速站点" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMaxWindStations" />
        </a-form-item>
        <a-form-item label="最大风速(m/s)" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMaxWind" />
        </a-form-item>
        <a-form-item label="最低能见度站点" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMinVisStations" />
        </a-form-item>
        <a-form-item label="最低能见度(km)" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMinVis" />
        </a-form-item>
        <a-form-item label="PM10极值站点" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMaxPM10Stations" />
        </a-form-item>
        <a-form-item label="PM10极值(ug/m3)" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.dustMaxPm10" />
        </a-form-item>
        <a-form-item label="是否影响北京" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.bjisInDust" />
        </a-form-item>
        <a-form-item label="备注" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
          <a-input v-model:value="form.bz" />
        </a-form-item>
      </a-form>
      <div class="xiazai">
        <a :href="form.dustVisFile">沙尘文件下载</a>
        <a :href="form.dustWindFile">最大风速文件下载</a>
        <a :href="form.dustWindFile">最小能见度文件下载</a>
      </div>
    </div>
  </div>
</template>
<script>
  import CustomTabs from './CustomTabs.vue';
  import scgcpg from '/@/api/api-interface/scgcpg';
  export default {
    components: {
      CustomTabs,
    },
    data() {
      return {
        currentTab: 1,
        searchForm: {
          timeType: '1',
          sortMethod: '2',
          sortType: 'time',
        },
        form: {},
        dataSource: [],
        columns: [
          {
            title: '编号',
            dataIndex: 'wid',
            key: 'wid',
            width: 80,
          },
          {
            title: '截至时间',
            dataIndex: 'time',
            key: 'time',
            width: 160,
          },
          {
            title: '过程类型',
            dataIndex: 'processType',
            key: 'processType',
          },
        ],
        tabs: [
          { title: '影响范围', isActive: true },
          { title: '能见度', isActive: false },
          { title: '风速图', isActive: false },
        ],
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      handleTabChange(index) {
        console.log(`Tab changed to ${index}`);
        // 更新当前激活的 tab
        this.tabs.forEach((tab, i) => {
          tab.isActive = i === index;
        });
      },
      getData() {
        scgcpg.dustList(this.searchForm).then((res) => {
          this.dataSource = res.data;
          if (this.dataSource.length > 0) {
            this.getById(this.dataSource[0].id);
          }
        });
      },
      getById(id) {
        scgcpg.getById(id).then((res) => {
          this.form = res.data;
          if (this.form.bjisInDust === 1) {
            this.form.bjisInDust = '是';
          } else {
            this.form.bjisInDust = '否';
          }
          this.form.dustFile =
            config.baseURL + '/picImageServer/hpwData/dustFile/1646438688745.dat';
          this.form.dustWindFile =
            config.baseURL + '/picImageServer/hpwData/windFile/1646438688745.dat';
          this.form.dustVisFile =
            config.baseURL + '/picImageServer/hpwData/visFile/1646438688745.dat';
          this.form.img = config.baseURL + '/picImageServer/hpwData/img/1646438688745.jpg';
        });
      },
      handleSearch() {
        this.getData();
      },
      handleExport() {
        scgcpg.export(this.searchForm).then((res) => {
          // const dis = res.headers['content-disposition'];
          // const fileName = dis.split('attachment;filename=')[1];
          const fileName = '导出.xlsx';
          const fileData = new Blob([res.data]);
          const url = window.URL.createObjectURL(fileData);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        });
      },
      handleClickRow(record, index) {
        return {
          onClick: () => {
            this.getById(record.id);
          },
        };
      },
      handleDateChange(dates) {
        if (dates.length === 2) {
          const startDate = dates[0].format('YYYY-MM-DD');
          const endDate = dates[1].format('YYYY-MM-DD');
          this.searchForm.startDate = startDate;
          this.searchForm.endDate = endDate;
        } else {
          this.searchForm.startDate = '';
          this.searchForm.endDate = '';
        }
      },
    },
  };
</script>
<style scoped>
  .container {
    display: flex; /* 使用 Flexbox 布局 */
    margin-left: -100px;
    margin-right: -100px;
    height: 730px;
  }
  .top {
    margin-top: -30px;
    margin-left: -100px;
    margin-right: -100px;
    background-color: #ffffff;
    border: 1px solid #ccc;
  }
  .left {
    width: 23%;
    background-color: #ffffff; /* 设置背景颜色 */
    height: 760px;
    border: 1px solid #ccc;
  }
  .center {
    width: 50%;
    background-color: #ffffff;
    height: 760px;
    border: 1px solid #ccc;
  }
  .right {
    width: 27%;
    background-color: #ffffff;
    height: 760px;
    border: 1px solid #ccc;
  }
  ::v-deep(.ant-table) {
    font-size: 14px;
    font-family: 'Arial', sans-serif;
  }
  /* 使用深度选择器覆盖表头加粗样式 */
  .ant-table-wrapper >>> .ant-table-thead > tr > th {
    /*font-weight: normal !important;*/
    padding: 8px 8px !important;
  }
  .ant-table-wrapper >>> .ant-table-tbody > tr > td {
    /*font-weight: normal !important;*/
    padding: 8px 8px !important;
  }
  .ant-form-item {
    margin-bottom: 1px !important;
  }
  ::v-deep(.ant-form-item .ant-form-item-label > label) {
    font-size: 13px !important;
    font-family: 'Arial', sans-serif;
  }
  .ant-input {
    width: 95%;
    /*height: 25px;*/
  }
  .xiangqing {
    font-size: 20px;
    color: #000000;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
  }
  .xiazai {
    margin-top: 5px;
    border-top: 1px solid #ccc;
  }
  .xiazai a {
    margin-left: 20px;
    font-size: 13px;
  }
  .imge {
    text-align: center;
    width: 870px;
    height: 730px;
    margin-top: 20px;
  }
  /*!* 覆盖单元格内边距样式 *!*/
  /*.ant-table-wrapper >>> .ant-table-thead > tr > th,*/
  /*.ant-table-wrapper >>> .ant-table-tbody > tr > td,*/
  /*.ant-table-wrapper >>> tfoot > tr > th,*/
  /*.ant-table-wrapper >>> tfoot > tr > td {*/
  /*  padding: 8px 8px !important;*/
  /*  overflow-wrap: normal !important;*/
  /*}*/
</style>
